<template>
  <div class="fillcontain">
    <div class="main-container fillcontain">
      <header class="fill_header">
        <a class="fill_header_logo left"></a>
        <div class="fill_header_title left">
          <span>中科深度舆情监测系统</span>
        </div>
        <div class="fill_header_user right">
          <el-badge is-dot class="item">
            <img src="../assets/information.png" alt="">
          </el-badge>
          <el-dropdown @command="handleCommand">
            <a>
              <img src="../assets/user.png" alt="">
              <span class="el-dropdown-link">{{ userInfo.userName}}<i
                class="el-icon-arrow-down el-icon--right"></i></span>
            </a>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="information">个人中心</el-dropdown-item>
              <el-dropdown-item command="exit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </header>
      <aside class="fill_aside common-transition">
        <el-row style="height: 100%;">
          <el-col :span="24">
            <el-menu default-active="2" class="el-menu-vertical-demo" style="border: none;" router>
              <el-menu-item index="manage">
                <i class="el-icon-location"></i><span slot="title" style="font-weight: bold">首页</span>
              </el-menu-item>
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-view"></i><span slot="title" style="font-weight: bold">舆情监测</span>
                </template>
                <el-menu-item index="warningList">信息列表</el-menu-item>
                <el-menu-item index="warningCharts">图表统计</el-menu-item>
                <el-menu-item index="2-2">预警日报</el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-edit"></i><span slot="title" style="font-weight: bold">统计图表</span>
                </template>
                <el-menu-item index="hotAddress">地点热力图</el-menu-item>
                <el-menu-item index="hotPeople">热点人物柱状图</el-menu-item>
                <el-menu-item index="hotAgency">热点机构柱状图</el-menu-item>
                <el-menu-item index="hotResource">热点来源柱状图</el-menu-item>
                <el-menu-item index="hotSource">活跃媒体饼状图</el-menu-item>
                <el-menu-item index="keywordTrend">关键词正负倾向图</el-menu-item>
                <el-menu-item index="peopleRelationship">人物关系图</el-menu-item>
                <el-menu-item index="forecast">预测图</el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-document"></i><span slot="title" style="font-weight: bold">竞品分析</span>
                </template>
                <el-menu-item index="3-1">创建分析</el-menu-item>
                <el-menu-item index="3-2">报告列表</el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-menu"></i><span slot="title" style="font-weight: bold">用户中心</span>
                </template>
                <el-menu-item index="4-1">我的信息</el-menu-item>
                <el-menu-item index="4-2">我的收藏</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </aside>
      <nav class="fill_nav common-transition">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 46px; padding-left: 20px">
          <el-breadcrumb-item :to="{ path: '/manage' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">{{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
      </nav>
      <div class="fill_content common-transition">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    computed: {
      ...mapState(['userInfo']),
    },
    methods: {
      handleCommand(command) {
        console.log(command);
        if (command == 'exit') {
          this.$router.push('/')
        }
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../style/mixin.less";

  .main-container {
    position: relative;
    .fill_header {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      max-width: 100%;
      height: 50px;
      background-color: #0067F5;
      z-index: 1444;
      .fill_header_logo {
        display: inline-block;
        width: 143px;
        height: 50px;
        line-height: 50px;
        background: url("../assets/logo.png") no-repeat center;
        background-size: 88px 36px;
      }
      .fill_header_title {
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        color: #fff;
        font-family: 'SimHei';
      }
      .fill_header_title span {
        padding: 0 20px;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
      }
      .fill_header_user {
        padding: 0 20px;
        .el-badge {
          cursor: pointer;
          margin: 0 40px;
        }
      }
      .el-dropdown {
        color: #fff;
        cursor: pointer;
      }
      .el-dropdown img {
        display: inline-block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: middle;
        margin-bottom: 4px;
        margin-right: 8px;
      }
      .el-dropdown a {
        display: inline-block;
        line-height: 50px;
      }
    }
    .fill_aside {
      position: fixed;
      left: 0;
      top: 0;
      /*width: 200px;*/
      overflow: hidden;
      padding-top: 50px;
      min-height: 100%;
      box-shadow: 2px 0 1px #dee7f4;
      z-index: 1333;
      background-color: #fff;
    }
    .fill_nav {
      position: fixed;
      top: 50px;
      width: 100%;
      margin-left: 200px;
      height: 46px;
      line-height: 46px;
      background-color: #fff;
      z-index: 300;
      box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
    }
    .fill_content {
      position: absolute;
      top: 96px;
      left: 200px;
      right: 0;
      bottom: 0;
      width: auto;
      height: auto;
    }
    .slide_left {
      left: 64px;
    }
    .slide_margin_left {
      margin-left: 64px;
    }
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-active {
      opacity: 0;
    }
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
